﻿var exam = {};

exam.scrollLoad = {
    moveEle: "", //滚动条可视区域
    scrollView: "", //信息内容区域
    refreshEle: "", //刷新的loading
    refreshTxtEle: "", //刷新显示的提示文字
    touch: 60,
    moved: 60,
    startY: 60,
    diff: 60,
    moveDiff: 60,
    pagePull: true,
    loadData: false,
    init: () => {
        exam.scrollLoad.moveEle = document.getElementsByClassName('content')[0]; //滚动条可视区域
        exam.scrollLoad.scrollView = document.getElementsByClassName('scrollview')[0]; //信息内容区域
        exam.scrollLoad.refreshEle = document.getElementsByClassName('refresh-loading')[0]; //刷新的loading
        exam.scrollLoad.refreshTxtEle = document.getElementsByClassName('refresh-txt')[0]; //刷新显示的提示文字

        exam.scrollLoad.moveEle.addEventListener('touchstart', function (e) {
            if (exam.scrollLoad.moveEle.scrollTop > 0) {
                //当页面已经有滚动或者不是置顶的时候，不需要进行下拉刷新，是页面正常的滑动
                exam.scrollLoad.touch = false;
                return;
            }
            exam.scrollLoad.touch = true; //触摸开始
            exam.scrollLoad.moved = false; //还没有进行下拉刷新的滑动
            exam.scrollLoad.startY = e.touches[0].clientY; //记录当前手指在屏幕上的纵向坐标，用于判断页面是上滑还是下滑
        }, false);

        exam.scrollLoad.moveEle.addEventListener('touchmove', function (e) {
            if (!exam.scrollLoad.touch || !exam.scrollLoad.pagePull) {
                return;
            }
            var touchesDiff = e.touches[0].clientY - exam.scrollLoad.startY; //计算的移动位移
            if (touchesDiff < 0) {
                //说明页面是向上滑的，不做任何操作
                exam.scrollLoad.moved = false;
                return;
            }
            exam.scrollLoad.moved = true;
            exam.scrollLoad.diff = touchesDiff;
            var distance = 0;
            if (exam.scrollLoad.diff <= exam.scrollLoad.moveDiff) {
                //moveDiff至少要等于loading的高度
                //当滑动小于规定的临界值时
                distance = exam.scrollLoad.diff;
                exam.scrollLoad.refreshTxtEle.innerHTML = '下拉可刷新';
            } else {
                exam.scrollLoad.refreshTxtEle.innerHTML = '释放可刷新';
                //弹性
                if (touchesDiff <= (2 * exam.scrollLoad.moveDiff)) {
                    distance = exam.scrollLoad.moveDiff + 0.5 * (touchesDiff - exam.scrollLoad.moveDiff);
                } else {
                    distance = exam.scrollLoad.moveDiff + 0.1 * (touchesDiff - exam.scrollLoad.moveDiff) + 0.05 * (touchesDiff - 2 * exam.scrollLoad.moveDiff);
                }
            }
            if (distance > 0) {
                //滑动的距离
                exam.scrollLoad.css(exam.scrollLoad.refreshEle, 0);
                exam.scrollLoad.refreshEle.style.height = distance + 'px';
            }
        }, false);
    },
    css: (ele, t) => {
        ele.style.transition = "all " + t + "ms";
        ele.style.webkitTransition = "all " + t + "ms";
    },
    setHeight: () => {
        exam.scrollLoad.moveEle.style.maxHeight = exam.scrollLoad.moveEle.parentNode.offsetHeight + "px";
    },
    //上拉加载
    pullUp: (callback) => {
        exam.scrollLoad.setHeight();
        var loadMore = document.getElementById('loadMore');
        
        exam.scrollLoad.moveEle.addEventListener('scroll', function (e) {
            requestAnimationFrame(function () {
                //当数据正在加载时，直接返回
                if (exam.scrollLoad.loadData) {
                    return;
                }
                var contentHeight = exam.scrollLoad.scrollView.offsetHeight;
                //滚动的距离，加上可视窗口的高度，因为设置了.content的height
                var scrollTop = exam.scrollLoad.moveEle.scrollTop + exam.scrollLoad.moveEle.offsetHeight;
                //当滚动距离内容底部10px的时候，加载下一页数据  
                if (contentHeight && scrollTop > contentHeight - 10) {
                    //loadMore.classList.add('type-1');
                    exam.scrollLoad.loadData = true;
                    if (callback)
                        callback();

                    //loadMore.classList.remove('type-1');
                }
            });
        }, false);

    },
    //下拉刷新
    pullDown: (callback) => {
        exam.scrollLoad.setHeight();

        exam.scrollLoad.moveEle.addEventListener('touchend', function (e) {
            if (!exam.scrollLoad.touch || !exam.scrollLoad.moved) {
                exam.scrollLoad.refreshEle.style.height = '0px';
                return;
            }
            exam.scrollLoad.css(exam.scrollLoad.refreshEle, 300);
            exam.scrollLoad.pagePull = false;
            if (exam.scrollLoad.diff > exam.scrollLoad.moveDiff) {
                exam.scrollLoad.refreshTxtEle.innerHTML = '刷新中';
                exam.scrollLoad.refreshEle.style.height = exam.scrollLoad.moveDiff + 'px';
                setTimeout(() => {
                    var childNodes = exam.scrollLoad.scrollView.children;
                    for (var j = childNodes.length - 1; j >= 0; j--) {
                        exam.scrollLoad.scrollView.removeChild(childNodes[j]);
                    }

                    if (callback)
                        callback();

                    //延迟模拟接口调用
                    exam.scrollLoad.css(exam.scrollLoad.refreshEle, 300);
                    exam.scrollLoad.refreshEle.style.height = '0px';
                    setTimeout(() => {
                        exam.scrollLoad.pagePull = true; //控制在刷新期间，重复向下拉动，不做任何操作   
                    }, 300);
                }, 500);
            } else {
                exam.scrollLoad.pagePull = true;
                exam.scrollLoad.refreshEle.style.height = '0px';
            }
        }, false);
        event.stopPropagation();
    }
};